<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Watermark - 网页水印解决方案</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            padding: 40px 0;
            background: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 30px;
        }

        .header h1 {
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .header p {
            color: #666;
            font-size: 1.1em;
        }

        .section {
            margin-bottom: 40px;
        }

        h2 {
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
        }

        h3 {
            color: #34495e;
            margin: 20px 0 10px;
        }

        .demo-container {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
        }

        .control-panel {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }

        pre {
            background: #f1f1f1;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
        }

        code {
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
            font-size: 14px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f8f9fa;
        }

        .example {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Web Watermark</h1>
        <p>一个轻量级的网页水印解决方案，支持静态文本和动态时间戳水印</p>
    </div>

    <div class="section">
        <h2>特性</h2>
        <ul>
            <li>🎯 支持静态文本和动态时间戳</li>
            <li>🛡️ 防篡改机制</li>
            <li>🎨 高度可定制</li>
            <li>🚀 轻量级，无依赖</li>
            <li>📱 响应式布局</li>
            <li>🔄 实时更新时间</li>
        </ul>
    </div>

    <div class="section">
        <h2>演示</h2>
        <div class="demo-container">
            <div class="control-panel">
                <button onclick="toggleWatermark()">切换水印显示</button>
                <button onclick="updateWatermarkText()">更新水印文本</button>
                <button onclick="toggleTime()">切换时间显示</button>
                <button onclick="changeOpacity()">调整透明度</button>
                <button onclick="changeRotation()">调整旋转角度</button>
            </div>
            <div id="demo-content">
                <h3>演示内容区域</h3>
                <p>这是一段示例文本，用于展示水印效果。您可以通过上方的按钮来控制水印的各种属性。</p>
            </div>
        </div>
    </div>

    <div class="section">
        <h2>使用方法</h2>
        <h3>安装</h3>
        <pre><code>&lt;script src="watermark.js"&gt;&lt;/script&gt;</code></pre>

        <h3>基础用法</h3>
        <pre><code>const watermark = new Watermark({
    staticText: '公司名称@用户名',
    width: 150,
    height: 100,
    fontSize: 13,
    opacity: 0.06,
    rotate: -30
});</code></pre>

        <h3>带时间戳的水印</h3>
        <pre><code>const watermark = new Watermark({
    staticText: '公司名称@用户名',
    showTime: true,
    timeFormat: {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    }
});</code></pre>
    </div>

    <div class="section">
        <h2>配置选项</h2>
        <table>
            <tr>
                <th>参数</th>
                <th>类型</th>
                <th>默认值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>width</td>
                <td>number</td>
                <td>150</td>
                <td>水印宽度</td>
            </tr>
            <tr>
                <td>height</td>
                <td>number</td>
                <td>100</td>
                <td>水印高度</td>
            </tr>
            <tr>
                <td>rotate</td>
                <td>number</td>
                <td>-30</td>
                <td>旋转角度</td>
            </tr>
            <tr>
                <td>fontSize</td>
                <td>number</td>
                <td>13</td>
                <td>字体大小</td>
            </tr>
            <tr>
                <td>opacity</td>
                <td>number</td>
                <td>0.09</td>
                <td>透明度</td>
            </tr>
            <tr>
                <td>staticText</td>
                <td>string</td>
                <td>''</td>
                <td>静态文本内容</td>
            </tr>
            <tr>
                <td>showTime</td>
                <td>boolean</td>
                <td>false</td>
                <td>是否显示时间</td>
            </tr>
            <!-- 其他配置项... -->
        </table>
    </div>

    <script src="watermark.js"></script>
    <script>
        let watermark;
        let currentOpacity = 0.06;
        let currentRotation = -30;
        let showTime = true;

        // 初始化水印
        function initWatermark() {
            watermark = new Watermark({
                staticText: '演示水印@DEMO',
                width: 150,
                height: 100,
                fontSize: 13,
                opacity: currentOpacity,
                rotate: currentRotation,
                showTime: showTime
            });
        }

        // 切换水印显示/隐藏
        function toggleWatermark() {
            const watermarkElement = document.getElementById('watermark-container');
            if (watermarkElement) {
                watermark.destroy();
            } else {
                initWatermark();
            }
        }

        // 更新水印文本
        function updateWatermarkText() {
            watermark.updateOptions({
                staticText: '更新后的水印文本@' + new Date().getTime()
            });
        }

        // 切换时间显示
        function toggleTime() {
            showTime = !showTime;
            watermark.updateOptions({ showTime });
        }

        // 调整透明度
        function changeOpacity() {
            currentOpacity = currentOpacity === 0.06 ? 0.12 : 0.06;
            watermark.updateOptions({ opacity: currentOpacity });
        }

        // 调整旋转角度
        function changeRotation() {
            currentRotation = currentRotation === -30 ? -45 : -30;
            watermark.updateOptions({ rotate: currentRotation });
        }

        // 初始化水印
        initWatermark();
    </script>
</body>
</html> 